<template>
	<pager ref="pager" @loadData="loadData">
		<view class="safe-bottom flex flex-col w100">
			<view class="flex align-c justify-c w100">
				<image class="icon1" mode="widthFix" :src="$assets.img('/static/images/ic001.png')"></image>
			</view>
			<view class="flex align-c justify-c w100">
				<image class="icon2" mode="widthFix" :src="$assets.img('/static/images/ic002.png')"></image>
			</view>
			<view class="tip1 flex align-c justify-c">请开启您的蓝牙</view>
			<view class="foot flex align-c justify-c w100">
				<view @click="scanQRCode" hover-class="click-view" class="btn flex align-c justify-c">扫码连接设备</view>
			</view>
			<view class="w100" style="height: 60rpx;"></view>
		</view>
	</pager>
</template>
<script>
	export default {
		data() {
			return {};
		},
		onShareAppMessage() {
			return {
				path: '/pages/index/index'
			};
		},
		methods: {
			loadData() {
				const vm = this;
				vm.$refs.pager.finish();
			},
			scanQRCode() {
				const vm = this;

				if (!vm.$utils.isLogined(true)) {
					return
				}

				vm.$utils.getMacAddressByScan().then(res => {
					console.log(res)
					uni.redirectTo({
						url: '/pkgWheelchair/pages/index/index'
					})
				}).catch(error => {
					console.log(error)
					vm.$utils.showToast(error)
				})
			},
		}
	};
</script>
<style>
	page {
		background-color: #000000;
	}
</style>
<style lang="scss" scoped>
	.icon1 {
		width: 699rpx;
		height: 178rpx;
		display: block;
		margin-top: 100rpx;
		margin-bottom: 200rpx;
	}

	.icon2 {
		width: 152rpx;
		height: 152rpx;
		display: block;
		border-radius: 50%;
		margin-bottom: 24rpx;
	}

	.tip1 {
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		margin-bottom: 82rpx;
	}

	.foot {
		margin-bottom: 30rpx;

		.btn {
			width: 560rpx;
			height: 100rpx;
			background: linear-gradient(180deg, #427DF7 0%, #0B51E4 100%);
			border-radius: 50rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>